
namespace("controls.Box", 
{
	'@inherits' 		 : w3c.HtmlComponent,
	'@stylesheets' :  ["/" + appconfig.namespace + "/cdn/css/Box.css"],
	'@nativednd' : false,
	'@traits'  : [Draggable],
	
	
	initialize : function(){
		this.addEventListener("dragstart", 	this.ondragstart.bind(this), 	false);
		this.addEventListener("dragover", 	this.ondragover.bind(this), 	false);
		this.addEventListener("dragenter", 	this.ondragenter.bind(this), false);
		this.addEventListener("drop", 			this.ondrop.bind(this), 		false);
		this.addEventListener("dragend",		this.ondragend.bind(this), 	false);
		this.addEventListener("dragleave",	this.ondragleave.bind(this), false);
		this.addEventListener("drag",			this.ondrag.bind(this), 		false);
	},
	
	animaterevert : function(){
		return false;	
	},
	
	accepts : function(obj) {
		return !(obj instanceof controls.Box);
	},
	ondragleave : function(e){
		this.removeClass("over");
	},
	
	ondrag : function(e){
	},
	
	ondragend : function(e){
		/*jQuery(this.element).css({
			position: "relative",
			top:e.clientY + "px",
			left: e.clientX + "px",
		});*/
	},
	
	ondragstart : function(e) {
		console.log("box -> " + e.phaseName)
		e.dataTransfer.setData('Text', this.element.getAttribute("cuuid"));
	},
	
	ondrop : function(e) {
		if (e.preventDefault) {
            //e.preventDefault();
        }
		console.lof("ondrop")
        return false;
	},
	
	ondragover : function(e) {
		if(!this.hasClass("over")) { this.addClass("over") }
        if (e.preventDefault) {
            //e.preventDefault();
        }
        return false;
	},
	
	ondragenter : function(e) {
       if (e.preventDefault) {
            //e.preventDefault();
        }
        return false;
	},
	
	innerHTML:
	'<div class="Box" draggable="true" droppable="false"></div>'
});
